<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>Orbit News</title>

	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

	<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="css/foundation.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">

	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<!-- Header -->
	<header class="clearfix">
		<!-- Top Menu -->
		<nav id="top-menu" class="clearfix">
			<ul class="no-bullet inline-list m0">
				<li><a href="#">Shortcodes</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Pages</a></li>
				<li><a href="#">Links</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">Admin options</a></li>
				<li><a href="#">Documentation</a></li>
			</ul>
		</nav>
		<!-- End Top Menu -->

		<div class="inner-header clearfix">
			<div id="logo" class="left">
				<h1><a href="index-2.html"><img alt="" src="images/logo.png"></a></h1>
			</div>

			<div class="ads-728x90 right">
				<a href="#"><img alt="" src="upload/728x90ads.gif"></a>
			</div>
		</div>
	</header>
	<!-- End Header -->

	<!-- Container -->
	<section class="container row clearfix">
		<header class="clearfix">
			<nav id="main-menu" class="left navigation">
				<ul class="sf-menu no-bullet inline-list m0">
					<li><a href="index-2.html" class="active">Home</a></li>
		    		<li><a href="#">Category</a>
		    			<ul class="sub-menu">
							<li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
							<li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
							<li><a href="blog-without-sidebar.html">Without Sidebar</a></li>
						</ul>
		    		</li>
		    		<li><a href="#">Single Post</a>
		    			<ul class="sub-menu">
							<li><a href="singlepost-right-sidebar.html">Right Sidebar</a></li>
							<li><a href="singlepost-left-sidebar.html">Left Sidebar</a></li>
							<li><a href="singlepost-without-sidebar.html">Without Sidebar</a></li>
						</ul>
		    		</li>
		    		<li><a href="#">Pages</a>
		    			<ul class="sub-menu">
							<li><a href="typography.html">Typography</a></li>
							<li><a href="video.html">Videos</a></li>
							<li><a href="404.html">Error 404</a></li>
							<li><a href="underconstruction.html">Underconstruction</a></li>
						</ul>
		    		</li>
		    		<li><a href="shortcodes.html">Shortcodes</a></li>
		    		<li><a href="#">Features</a>
		    			<ul class="sub-menu">
		    				<li><a href="gallery.html">Gallery</a></li>
							<li><a href="#">Videos</a>
								<ul class="sub-menu">
									<li><a href="youtube.html">Youtube</a></li>
									<li><a href="vimeo.html">Vimeo</a></li>
								</ul>
							</li>
						</ul>
		    		</li>
		    		<li><a href="contact.html">Contact</a></li>
				</ul>
			</nav>

			<div class="search-bar right clearfix">
				<form action="http://www.example.com/">
					<input name="s" type="text" data-value="search" value="search">
					<input name="submit" type="submit" value="">
				</form>
			</div>
		</header>

		<!-- Inner Container -->
		<section class="inner-container clearfix">
			<!-- Content -->
			<section id="content" class="twelve column row pull-center singlepost">
				<h4 class="cat-title mb25">Shortcodes</h4>

				<h4 class="post-title">Dropcaps</h4>

				<!-- Dropcap Title -->
				<section class="row">
					<div class="four column">
						<div class="dropcap1">
							<h6>Dropcap one</h6>
							<p><span class="large-cap">1</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
						</div>
					</div>

					<div class="four column">
						<div class="dropcap1">
							<h6>Dropcap two</h6>
							<p><span class="large-cap">2</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
						</div>
					</div>

					<div class="four column end">
						<div class="dropcap1">
							<h6>Dropcap three</h6>
							<p><span class="large-cap">3</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
						</div>
					</div>
				</section>

				<section class="row">
					<div class="four column">
						<div class="dropcap2">
							<h6>Dropcap one</h6>
							<p><span class="large-cap">1</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
						</div>
					</div>

					<div class="four column">
						<div class="dropcap2">
							<h6>Dropcap two</h6>
							<p><span class="large-cap">2</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
						</div>
					</div>

					<div class="four column end">
						<div class="dropcap2">
							<h6>Dropcap three</h6>
							<p><span class="large-cap">3</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
						</div>
					</div>
				</section>
				<!-- End Dropcaps -->

				<br>
				<br>

				<h4 class="post-title">Columns</h4>

				<!-- Columns 2 -->
				<section class="row">
					<div class="six column">
						<h5>One half</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.</p>
					</div>
					<div class="six column end">
						<h5>One half</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.</p>
					</div>
				</section>
				<!-- Columns 2 -->


				<!-- Columns 3 -->
				<section class="row">
					<div class="four column">
						<h5>One third</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim</p>
					</div>
					<div class="four column">
						<h5>One third</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim</p>
					</div>
					<div class="four column end">
						<h5>One third</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim</p>
					</div>
				</section>
				<!-- End Columns 3 -->

				<!-- Columns 4 -->
				<section class="row">
					<div class="three column">
						<h5>One foruth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="three column">
						<h5>One foruth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="three column">
						<h5>One foruth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="three column end">
						<h5>One foruth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
				</section>
				<!-- End Columns 4 -->

				<!-- Columns 6 -->
				<section class="row">
					<div class="two column">
						<h5>One sixth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="two column">
						<h5>One sixth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="two column">
						<h5>One sixth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="two column end">
						<h5>One sixth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="two column end">
						<h5>One sixth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
					<div class="two column end">
						<h5>One foruth</h5>
						<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
					</div>
				</section>
				<!-- End Columns 4 -->

				<br>
				<br>

				<h4 class="post-title">Buttons</h4>

				<!-- Buttons -->
				<a class="button-red">Button</a>
				<a class="button-yellow">Button</a>
				<a class="button-green">Button</a>
				<a class="button-blue">Button</a>
				<a class="button-gray">Button</a>
				<a class="button-black" style="margin-right: 0px;">Button</a>
				<a class="button-violet">Button</a>
				<a class="button-oqean">Button</a>
				<a class="button-dark-violet">Button</a>
				<a class="button-gold">Button</a>
				<a class="button-light-green">Button</a>
				<a class="button-brown" style="margin-right: 0px;">Button</a>
				<!-- End Buttons -->

				<br>
				<br>

				<h4 class="post-title">Lists</h4>

				<!-- Lists -->
				<section class="row">
					<div class="three column">
						<ul class="bullet-list">
							<li>Habitant morbi senectus et netus</li>
							<li>Mauris Tincidunt proin dictum</li>
							<li>Porta odio id semper magna</li>
						</ul>
					</div>

					<div class="three column">
						<ul class="link-list">
							<li>Habitant morbi senectus netus</li>
							<li>Mauris Tincidunt dictum augue</li>
							<li>Porta odio id semper magna</li>
						</ul>
					</div>

					<div class="three column">
						<ul class="map-list">
							<li>Habitant morbi senectus netus</li>
							<li>Mauris Tincidunt proin dictum</li>
							<li>Porta odio id semper magna</li>
						</ul>
					</div>

					<div class="three column">
						<ul class="arrow-list">
							<li>Habitant morbi senectus netus</li>
							<li>Mauris Tincidunt proin dictum</li>
							<li>Porta odio id semper magna</li>
						</ul>
					</div>
				</section>
				<!-- End Lists -->

				
				<h4 class="post-title">Tabs</h4>

				<!-- Tabs -->
				<dl class="tabs">
					<dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
					<dd><a href="#simple2">Simple Tab 2</a></dd>
					<dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
				</dl>
				<ul class="tabs-content">
					<li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
					<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
					<li id="simple3Tab">This is simple tab 3s content.</li>
				</ul>
				<!-- End Tabs -->

				<br>
				<br>

				<!-- Accordion -->
				<h4 class="post-title">Accordion</h4>

				<ul class="accordion">
					<li class="active">
						<div class="title">
							<h5>Accordion Panel 1</h5>
						</div>
						<div class="content">
						  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						</div>
					</li>
					<li>
						<div class="title">
							<h5>Accordion Panel 2</h5>
						</div>
						<div class="content">
						  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						</div>
					</li>
					<li>
					<div class="title">
						<h5>Accordion Panel 3</h5>
					</div>
						<div class="content">
						  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						</div>
					</li>
				</ul>
				<!-- End Accordion -->

				<br>
				<br>

				<h4 class="post-title">Table</h4>

				<!-- Table -->
				<table class="twelve">
				  <thead>
				    <tr>
				      <th>Table Header</th>
				      <th>Table Header</th>
				      <th>Table Header</th>
				      <th>Table Header</th>
				    </tr>
				  </thead>
				  <tbody>
				    <tr>
				      <td>Content</td>
				      <td>This is longer content</td>
				      <td>Content</td>
				      <td>Content</td>
				    </tr>
				    <tr>
				      <td>Content</td>
				      <td>This is longer content</td>
				      <td>Content</td>
				      <td>Content</td>
				    </tr>
				    <tr>
				      <td>Content</td>
				      <td>This is longer content</td>
				      <td>Content</td>
				      <td>Content</td>
				    </tr>
				    <tr>
				      <td>Content</td>
				      <td>This is longer content</td>
				      <td>Content</td>
				      <td>Content</td>
				    </tr>
				  </tbody>
				</table>
				<!-- End Table -->

				<br>
				<br>

				<h4 class="post-title">Image Thumbnails</h4>

				<!-- Image Thumbnails -->
				<section class="row">
					<div class="four column mb10">
						<a href="#" class="th"><img src="http://placehold.it/350x200"></a>
					</div>
					<div class="four column mb10">
						<a href="#" class="th"><img src="http://placehold.it/350x200"></a>
					</div>
					<div class="four column mb10">
						<a href="#" class="th"><img src="http://placehold.it/350x200"></a>
					</div>
				</section>
				<!-- End Image Thumbnails -->

				<br>
				<br>

				<h4 class="post-title">Price Table</h4>

				<!-- Price Table -->
				<section class="row">
					<div class="four column">
						<ul class="pricing-table">
						  <li class="title">Standard</li>
						  <li class="price">$99.99</li>
						  <li class="description">Content...</li>
						  <li class="bullet-item">1 Database</li>
						  <li class="bullet-item">5GB Storage</li>
						  <li class="bullet-item">20 Users</li>
						  <li class="cta-button"><a class="button-yellow" href="#">Buy it Now &raquo;</a></li>
						</ul>
					</div>

					<div class="four column">
						<ul class="pricing-table">
						  <li class="title">Standard</li>
						  <li class="price">$99.99</li>
						  <li class="description">Content...</li>
						  <li class="bullet-item">1 Database</li>
						  <li class="bullet-item">5GB Storage</li>
						  <li class="bullet-item">20 Users</li>
						  <li class="cta-button"><a class="button-yellow" href="#">Buy it Now &raquo;</a></li>
						</ul>
					</div>

					<div class="four column">
						<ul class="pricing-table">
						  <li class="title">Standard</li>
						  <li class="price">$99.99</li>
						  <li class="description">Content...</li>
						  <li class="bullet-item">1 Database</li>
						  <li class="bullet-item">5GB Storage</li>
						  <li class="bullet-item">20 Users</li>
						  <li class="cta-button"><a class="button-yellow" href="#">Buy it Now &raquo;</a></li>
						</ul>
					</div>
				</section>
				<!-- End Price Table -->

				<br>
				<br>

				<h4 class="post-title">Message Boxes</h4>

				<!-- Message Boxes -->
				<div class="alert-box">
				  This is a standard alert (div.alert-box).
				  <a href="#" class="close">&times;</a>
				</div>

				<div class="alert-box success">
				  This is a success alert (div.alert-box.success).
				  <a href="#" class="close">&times;</a>
				</div>

				<div class="alert-box alert">
				  This is an alert (div.alert-box.alert).
				  <a href="#" class="close">&times;</a>
				</div>

				<div class="alert-box secondary">
				  This is a secondary alert (div.alert-box.secondary).
				  <a href="#" class="close">&times;</a>
				</div>
				<!-- End Message Boxes -->

				<br>
				<br>
			</section>
			<!-- Content -->

			<!-- Footer -->
			<footer class="row clearfix">
				<!-- Footer widgets -->
				<ul class="no-bullet clearfix">
					<li class="widget four column">
						<h3 class="widget-title">About Us</h3>
			        	<div class="textwidget">
			        		<p>Lorem ipsum dolor sit amet, consec tetuer adipis cing elitraesent vestibulum molestie um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec luctus lorem aecenas tristique orci ac semuis ultricies pharetra onec accumsan malesuada orci. Fusce feugiat males odio. Morbi nunc odio, lorem aecenas tristique orci ac semuis ultricies...</p>
			       		</div>
					</li>
					<li class="widget four column">
						<h3 class="widget-title">Flicker Gallery</h3>
	        			<div class="flickr-widget">
	        				<ul class="block-grid four-up">
	        						<li><a href="#"><img src="upload/thumb1.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb2.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb3.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb4.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb5.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb6.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb7.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb8.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb5.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb4.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb2.jpg" alt=""></a></li>
	        						<li><a href="#"><img src="upload/thumb3.jpg" alt=""></a></li>
	        				</ul>
	        			</div>
					</li>
					<li class="widget four column">
						<h3 class="widget-title">Twitter</h3>
			        	<div class="twitter-widget">
			        		<ul>
			        			<li>
			        				<p><a href="#">about 25 days ago</a> Lorem ipsum dolor sit amet nulla malesuda odio morbi nunc odio tristique: <br/><a href="#">http://bit.ly/8b0wO4</a></p>
			        			</li>
			        			<li>
			        				<p><a href="#">about 32 days ago</a> Malesuda orci ultricies pharetra onec accimsan curcus nec lorem aecenas: <br/><a href="#">http://bit.ly/8b0wO4</a></p>
			        			</li>
			        			<li>
			        				<p><a href="#">about 59 days ago</a> Socis vestibulum cing molestie malesuada odio onces accussam orci lorem: <br/><a href="#">http://bit.ly/8b0wO4</a></p>
			        			</li>
			        		</ul>
			        	</div>
					</li>
				</ul>
				<!-- End Footer widgets -->

				<div class="copyright clearfix">
					© Copyright 2012 Pixelogic
				</div>

				<div id="back-to-top" class="right">
					<a href="#top">Back to Top</a>
				</div>
			</footer>
			<!-- End Footer -->
		</section>
		<!-- End Inner Container -->
	</section>
	<!-- End Container -->

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.superfish.js"></script>
	<script type="text/javascript" src="js/modernizr.foundation.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript" src="js/jquery.foundation.forms.js"></script>
	<script type="text/javascript" src="js/jquery.foundation.tabs.js"></script>
	<script type="text/javascript" src="js/jquery.foundation.accordion.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox.js"></script>
	<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>